<template>
	<mescroll-uni ref="mescrollRef" top="80rpx" @init="mescrollInit" @down="downCallback" @up="upCallback"
		:down="downOption" :up="upOption">
		<view class="collection-list">
			<view class="goods-list p-t-20" v-if="type == 1">
				<view v-for="(item, index) in collectionList" :key="item.id">
					<u-swipe-action :show="selectIndex == item.id" :index="item.id" bg-color="transparent"
						:btn-width="130" @click="clickBtn" @open="open" :options="options">
						<view class="collection-item flex bg-white" @tap="toGoods(item)">
							<u-image width="160rpx" height="160rpx" border-radius="6rpx" lazy-load class="m-r-20"
								:src="item.image" />
							<view class="info flex-1">
								<view class="flex row-between">
									<view class="name line-2">{{item.name}}</view>
								</view>
								<view class="flex row-between m-t-20">
									<price-format :first-size="30" :second-size="26" :price="item.min_price"
										:weight="400" :subscript-size="30" :color="colorConfig.primary" />
									<view class="btn primary flex row-center br60 sm"
										:class="{'valid muted': item.is_valid == 0}">
										{{ item.is_valid == 0 ? '已失效' : '去购买'}}
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action>
				</view>
			</view>
			<view class="store-list" v-if="type == 2">

				<view class="m-t-20" v-for="(item, index) in collectionList" :key="item.id">
					<u-swipe-action :show="selectIndex == item.id" :index="item.id" bg-color="transparent"
						:btn-width="130" @click="clickBtn" @open="open" :options="options">
						<view class="store-item bg-white flex" @tap="toShop(item)">
							<u-image width="80rpx" height="80rpx" border-radius="60rpx" :src="item.logo" />
							<view class="flex-1 m-l-10">
								<view class="store-name lg">
									{{item.name}}<text class="xxs tag white m-l-10 line-1"
										v-if="item.type == 1">自营</text>
								</view>
								<view class="m-t-12 xs muted">
									主营行业：{{item.cid_desc}}
								</view>
							</view>
							<!-- <view class="flex muted xs">
								评分：<view style="color: #FFA200;">{{item.score}}</view>
							</view> -->
						</view>
					</u-swipe-action>
				</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script>
	import {
		getCollectGoods,
		getCollectShop,
		collectGoods
	} from '@/api/user'
	import {
		changeShopFollow
	} from '@/api/shop'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		name: "collection-list",
		props: {
			type: {
				type: [String, Number]
			}
		},
		data() {
			return {
				collectionList: [],
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/images/goods_null.png',
						tip: '暂无收藏~', // 提示
						fixed: true
					}
				},
				options: [{
					text: '取消收藏',
					style: {
						backgroundColor: '#FF2C3C'
					}
				}],
				selectIndex: -1
			};
		},
		methods: {
			async upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let {type,} = this;
				const {
					data,
					code
				} = type == 1 ? await getCollectGoods({
					page_size: pageSize,
					page_no: pageNum
				}) : await getCollectShop({
					page_size: pageSize,
					page_no: pageNum
				})
				if (code == 1) {
					let curPageData = data.lists;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					if (page.num == 1) this.collectionList = [];

					this.collectionList = this.collectionList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}
			},
			toGoods(item) {
				if (item.is_valid) {
					this.$Router.push({
						path: '/pages/goods_details/goods_details',
						query: {
							id: item.id
						}
					})
				}
			},
			toShop(item) {
				this.$Router.push({
					path: '/pages/store_index/store_index',
					query: {
						id: item.id
					}
				})
			},
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.selectIndex = index;
				// }
			},
			async clickBtn(index) {
				const {
					code,
					data,
					msg
				} = this.type == 1 ? await collectGoods({
					goods_id: index
				}) : await changeShopFollow({
					shop_id: index
				})
				if (code == 1) {
					this.$toast({
						title: msg
					})
					this.downCallback()
				}
			}
		},
	}
</script>

<style lang="scss">
	.collection-list {
		.goods-list {
			.collection-item {
				padding: 20rpx;

				&:not(:last-of-type) {
					border-bottom: $-solid-border;
				}

				.btn {
					width: 148rpx;
					height: 52rpx;
					border: 1px solid $-color-primary;

					&.valid {
						background-color: #f2f2f2;
						border-color: transparent;
					}
				}
			}
		}

		.store-list {
			margin: 0 20rpx;

			.store-item {
				padding: 15rpx 20rpx;
				border-radius: 16rpx;

				.store-name {}

				.tag {
					background: linear-gradient(267deg, #FF2C3C 0%, #F52E99 100%);
					border-radius: 6rpx;
					padding: 0 9rpx;
					vertical-align: 5rpx;
				}
			}
		}
	}
</style>
